<template>
  <div
    id="carouselExampleIndicators"
    class="carousel slide"
    data-ride="carousel"
  >
    <ol class="carousel-indicators" style="justify-content: flex-end">
      <li
        data-target="#carouselExampleIndicators"
        :data-slide-to="i"
        v-for="(v, i) in banner"
        :key="i + '_' + i"
        :id="'banner_' + i"
      ></li>
    </ol>
    <div class="carousel-inner">
      <div
        class="carousel-item"
        :id="'carousel-item_' + i"
        v-for="(v, i) in banner"
        :key="i"
      >
        <img @click="v.click" :src="v.banner" class="d-block w-100" alt="..." />
      </div>
    </div>
    <div
      class="carousel-control-prev"
      type="button"
      data-target="#carouselExampleIndicators"
      data-slide="prev"
    >
      <img src="../assets/left.png" width="43" aria-hidden="true" />
    </div>
    <div
      class="carousel-control-next"
      type="button"
      data-target="#carouselExampleIndicators"
      data-slide="next"
    >
      <img src="../assets/right.png" width="43" aria-hidden="true" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Banner",
  props: ["banner", "setdialogVisible", "user"],
  created() {
    console.log(this.banner);
  },
  data() {
    return {
      active: 0,
    };
  },
  methods: {
    click() {
      if (this.user) {
        window.location.href = window.baseUrl + "authentication/main";
      } else {
        this.setdialogVisible(true);
      }
    },
  },
  mounted() {
    const z = document.getElementById("banner_0");
    const f = document.getElementById("carousel-item_0");
    if (z) {
      z.className = "active";
      f.className = "carousel-item active";
    }
  },
  watch: {
    banner() {
      window.$(".carousel").carousel(0);
    },
  },
};
</script>

<style scoped>
.image {
  object-fit: fill;
}
</style>

<style>
.el-carousel__arrow--left {
  left: 15%;
  border: 2px solid #fff;
  border-radius: 50%;
}
.el-carousel__arrow--left i {
  font-size: 24px;
}
.el-carousel__arrow--right i {
  font-size: 24px;
}
.el-carousel__arrow--right {
  right: 15%;
  border-radius: 50%;
  border: 2px solid #fff;
  font-size: 24px;
}
button:focus {
  outline: 0px dotted !important;
}
.el-carousel__indicators--horizontal {
  left: 70%;
}
.el-tooltip__popper {
  background: none !important;
  padding: 0 !important;
  width: 80px;
  margin-bottom: 0 !important;
}
</style>